<template>
    <div class="app-container">
        <div class="tech-border-out">
            <div class="tech-border">
                <el-card>
                    <div slot="header" class="clearfix">
                        <dv-decoration-7 style="width:200px;height:30px;;"> <p style="padding: 0 15px;">维修计划</p>  </dv-decoration-7>
                    </div>
                    <div class="filter-container">
                              <el-date-picker
                                style="margin-right: 10px;"
                                v-model="listQuery.date_range"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                            <el-input v-model="listQuery.name" placeholder="请输入设备名称" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                           
                            <el-select v-model.trim="listQuery.customer_id" placeholder="请选择所属客户" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item">
                                <el-option v-for="(customer, key) in customer_list" :key="key" :value="parseInt(customer.id)" :label="customer.name"></el-option>
                            </el-select>
                            <el-cascader
                                   clearable
                                    placeholder="请选择设备分类"
                                    v-model="listQuery.cate_id"
                                    :options="category_list" 
                                    style="width: 200px;margin-right: 10px;margin-bottom:10px"
                                />
                           

                            <el-select v-model.trim="listQuery.project_id" placeholder="请选择项目" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item">
                                <el-option v-for="(project, key) in projects_list" :key="key" :value="parseInt(project.id)" :label="project.title"></el-option>
                            </el-select>

 

                        <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                        {{ '搜索' }}
                        </el-button>
                        <el-button v-waves v-if="checkPermission(['maintenance.add_maintenance'])"  class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                            {{ "添加" }}
                        </el-button>  
                    </div>
                    <el-table
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        :data="list"
                        size="medium"
                        fit
                        highlight-current-row
                        class="table-container"
                        style="width: 100%"
                        row-key="id"
                        max-height="950"
                        :tree-props="{children: 'children'}"
                        >  
                        
                    <el-table-column  align="left" label="序号" >
                        <template slot-scope="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="下单时间" >
                        <template slot-scope="scope">
                            <span>{{ scope.row.create_time }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center"  label="设备名称" >
                        <template slot-scope="scope">
                            <span>{{ scope.row.equipment_name }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="设备分类">
                        <template slot-scope="scope">
                            <span v-if="scope.row.cate">{{ scope.row.cate.name }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="所属客户">
                        <template slot-scope="scope">
                            <span v-if="scope.row.customer">{{ scope.row.customer.name }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="所属项目">
                        <template slot-scope="scope">
                            <span v-if="scope.row.project">{{ scope.row.project.title }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="维修地址">
                        <template slot-scope="scope">
                            <span>{{ scope.row.province }} - {{ scope.row.city }} - {{ scope.row.area }} - {{ scope.row.address }}</span>
                        </template>
                    </el-table-column>


                    <el-table-column  align="center" label="维修原因">
                        <template slot-scope="scope">
                            <span v-if="scope.row.repair_reason">{{ scope.row.repair_reason }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="维修图片">
                        <template slot-scope="scope">
                            <el-image style="width: 50px; height: 50px;margin-right:5px"  v-for="(item,ids) in scope.row.repair_images" :key="ids" :preview-src-list="scope.row.repair_images" :src="item" fit="cover"></el-image>
                        </template>
                    </el-table-column>
                  
                    <el-table-column  align="center" label="状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == 0" size="small"  type="success"> 维修中 </el-tag>
                            <span v-else>维修完成</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" width="250" :label="'操作'">
                        <template slot-scope="scope">
                            
                            <el-button v-waves v-permission="['maintenance.edit_maintenance']"  type="primary"  size='mini' icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                                {{ "编辑" }}
                            </el-button>
                            <el-button :disabled="!checkPermission(['maintenance.delete_maintenance'])" type="primary" size="mini" icon="el-icon-edit" @click="handleDelete(scope.$index, scope.row)">
                                {{ '删除' }}
                            </el-button>
                         
                        </template>
                    </el-table-column>

                    </el-table>
                    <dv-decoration-10 :dur="1" style="height:5px;" />
                </el-card>
            </div>
        </div>

        <el-dialog  width="850px"  :visible.sync="edit.dialogVisible"  :show-close="false" @close="getList" >
            <dv-border-box-11  class="el-new-dialog" title="编辑维修计划">
                <edit  :customer_list="customer_list"  :projects_list="projects_list" :admin_list="admin_list" :category_list="category_list"  :item="edit" />
            </dv-border-box-11>
        </el-dialog>
        <el-dialog width="850px"   :visible.sync="create.dialogVisible" @close="getList"  :show-close="false">
            <dv-border-box-11  class="el-new-dialog" title="添加维修计划">
                <create  :customer_list="customer_list"  :admin_list="admin_list" :category_list="category_list"   :item="create" />
            </dv-border-box-11>
        </el-dialog>


    </div>
</template>
<script>
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list,init_data,del } from '@/api/maintenance_plan.js' // api接口
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件 
    import Create from './components/plan/create' // 添加组件  
    import Edit from './components/plan/edit' // 编辑组件  

    export default{
        name: 'maintenancePlan',
        components: { Pagination,Create,Edit }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
        data() {
            return {
                headerObj: {
                    'Authorization': 'Bearer ' + getToken()
                },
                map:null,
                list: [], // 列表数据
                total: 0, // 总条数
                select_ids : [], // 选中的id集合
                category_list : [], // 分类列表
                projects_list : [], // 项目列表
                customer_list : [], // 客户列表
                alarm_types : [], // 报警类型列表
                admin_list:[], // 维保列表
                listQuery: { //列表查询参数
                    page: 1,
                    limit: 10,
                    status:"",
                    name:"",
                    code:"",
                    cate_id:"",
                    customer_id:"",
                    create_time:"",
                },
              
              
                create: { // 新增
                    dialogVisible: false
                },  
                edit: { // 编辑
                    dialogVisible: false,
                    id: ''
                },  


            }
        },
        created() {
            this.getList()
            this.init();
        },
        methods: {
            init() {
                init_data().then(response => {
                    this.customer_list = response.data.customers;
                    this.category_list = response.data.category_list;
                    this.projects_list = response.data.projects;
                    this.admin_list = response.data.admins;
                })
            },
    
   
        
            checkPermission, // 权限判断函数
            
            // 下拉菜单命令处理
            handleCommand(command) {
                const { action, index, row } = command
                switch (action) {
                    case 'edit':
                        this.handleEdit(index, row)
                        break
                    case 'delete':
                        this.handleDelete(index, row)
                        break
                    case 'detail':
                        this.handleDetail(index, row)
                        break
                    case 'location':
                        this.showDeviceLocation(row)
                        break
                }
            },
 
            handleDelete(index, row) { // 删除
                const thiz = this
                this.$confirm('确认要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(row.id).then(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1500,
                        onClose() {
                            thiz.getList();
                        }
                    })
                    })
                }).catch(() => {

                })
            },  
            
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
        
      
            getList() { // 获取列表
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                    })
                },
            handleCreate() { // 新增对话框显示
                this.create.dialogVisible = true
            },  
            handleEdit(index, row) { // 编辑对话框显示
                this.edit.dialogVisible = true
                this.edit.id = row.id
            },  
 
        }
    }
</script>
<style scoped> 
    ::v-deep .el-icon-arrow-right{
        color: #fff!important;
    }
    .el-cascader{
        width: 350px!important;
    }
    .status-badge {
        display: inline-block;
        padding: 2px 20px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
    }

    .status-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
    }
    ::v-deep .el-range-input{
        background: #27486E!important;
    }
    ::v-deep .el-range-separator{
        color: #fff!important;
    }
    .status-badge:hover::before {
        left: 100%;
    }

    /* 状态颜色样式保持不变 */
    .status-0 {
        background: linear-gradient(135deg, #909399, #606266);
        color: white;
        border: 1px solid #5a5e66;
    }

    .status-1 {
        background: linear-gradient(135deg, #67c23a, #529b2e);
        color: white;
        border: 1px solid #4a8c29;
    }

    .status-2 {
        background: linear-gradient(135deg, #e6a23c, #d48220);
        color: white;
        border: 1px solid #c7731d;
    }

    .status-3 {
        background: linear-gradient(135deg, #f56c6c, #d63031);
        color: white;
        border: 1px solid #c12c2c;
        animation: pulse 2s infinite;
    }

    .status-4 {
        background: linear-gradient(135deg, #f56c6c, #c00000);
        color: white;
        border: 1px solid #a00000;
        box-shadow: 0 0 10px rgba(245, 108, 108, 0.5);
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7); }
        70% { box-shadow: 0 0 0 6px rgba(245, 108, 108, 0); }
        100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); }
    }

    /* 地图容器样式 */
    .map-container {
        padding: 10px;
    }

    .location-info {
        margin-top: 15px;
        padding: 15px;
        background: #07192E;
        border-radius: 4px;
    }

    .location-info p {
        margin: 5px 0;
        font-size: 14px;
    }

    /* 下拉菜单样式优化 */
    ::v-deep .el-dropdown-menu {
        min-width: 120px;
    }

    ::v-deep .el-dropdown-menu__item {
        text-align: center;
    }
</style>